<template>
    <div>
      <div>
        <el-form :inline="true">
          <el-form-item label="相册名称">
            <el-input v-model="filter.albumName" placeholder="输入相册名称"></el-input>
          </el-form-item>
          
          <el-form-item label="订单编号" >
            <el-input v-model="filter.orderNum" placeholder="输入订单编号"></el-input>
          </el-form-item>
          <el-form-item label="是否支付">
          <el-select v-model="filter.payStatus" placeholder="选择是否支付" clearable>
            <el-option label="已支付" :value="1"></el-option>
            <el-option label="未支付" :value="0"></el-option>
          </el-select>
        </el-form-item>
          <el-form-item>
            <el-button @click="search" type="primary">搜索</el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-table :data="records">
        <el-table-column type="index" label="序号" width="60px" />
        <el-table-column label="相册头像">
          <template #default="scope">
            <img class="w-14 h-2w-14" :src="scope.row.albumHeadImg" alt="" />
          </template>
        </el-table-column>
        <el-table-column prop="albumName" label="相册名称" />
        <el-table-column prop="boughtSize" label="购买容量"> </el-table-column>
        <el-table-column prop="orderContent" label="订单内容"> </el-table-column>
        <el-table-column prop="orderNum" label="订单编号"> </el-table-column>
        <el-table-column prop="orderPrice" label="订单金额"> </el-table-column>
        <el-table-column prop="orderTime" label="下单时间"> </el-table-column>

  
        <el-table-column label="是否支付">
          <template #default="scope">
            <el-tag v-if="scope.row.payStatus === 1" type="success"
              >已支付</el-tag
            >
            <el-tag v-else type="info"
              >未支付</el-tag
            >
          </template>
        </el-table-column>
  
        <el-table-column prop="payTime" label="支付时间"> </el-table-column>
        <el-table-column prop="period" label="有效期"> </el-table-column>
        <el-table-column prop="periodUnit" label="有效期单位"> </el-table-column>
        <el-table-column label="发布人">
          <template #default="scope">
            <div class="flex items-center">
              <img
                class="w-8 h-8 rounded-full"
                :src="scope.row.userHeadImg"
                alt=""
              />
              <span class="ml-2">{{ scope.row.userName }}</span>
            </div>
          </template>
        </el-table-column>
        <!-- <el-table-column fixed="right" label="操作">
          <template #default="scope">
            <el-button>操作</el-button>
          </template>
        </el-table-column> -->
      </el-table>
      <div class="flex justify-end mt-2">
  
  <el-pagination background layout="prev, pager, next" v-model:current-page="filter.pageNum"
    :default-page-size="filter.pageSize" :total="total" @prev-click="getList" @next-click="getList"
    @current-change="getList" />
  </div>
    </div>
  </template>
  
  <script setup lang="ts">
  import { onMounted, reactive, ref } from "vue";
  import { getOrderList } from "@/apis/order";
  const total = ref(1)
  
  const records = ref<OrderItem[]>([]);
  const filter = reactive<OrderFilter>({
    pageNum: 1,
    pageSize: 10,
  });
  const getList = async () => {
    const res = await getOrderList(filter);
    total.value = res.total
  
    records.value = res.list;
  };
  const search = () => {
    filter.pageNum = 1;
    getList()
  }
  onMounted(() => {
    getList();
  });
  </script>
  
  <style scoped></style>
  